<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <!--以最新的IE浏览器引擎去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--如果是双核浏览器，则使用webkit内核渲染-->
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keyword" content=""/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mystyle.css" />
    <link rel="stylesheet" href="__PUBLIC__/frame/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/frame/static/css/style.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery1.12.4.js"></script>
    <script type="text/javascript" src="__PUBLIC__/frame/layui/layui.js"></script>
    <link rel="icon" href="__PUBLIC__/frame/static/image/code.png">
    <script type="text/javascript" src="__PUBLIC__/frame/echarts/echarts.min.js"></script>
</head>
<body>

<div class="right">
    <div class="mg40">
        <div class="rkzhubiao">
            <div id="zhexian" style="height: 100%"></div>
        </div>    
        <div class="layui-row">
            <div class="layui-col-md1">
                <div>&nbsp;</div>
            </div>
            <div class="layui-col-md4">
                <div class="bingtu_left">
                    <div id="rkdtfb" style="height: 100%"></div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div>&nbsp;</div>
            </div>
            <div class="layui-col-md4">
                <div class="bingtu_right">
                    <div id="hxqt" style="height: 100%"></div>
                </div>
            </div>
            <div class="layui-col-md1">
                <!-- <div>&nbsp;</div> -->
            </div>
        </div>
        <div class="liubianxing">
            <div id="leida" style="height: 100%"></div>
        </div>
    </div> 
</div>
<!-- 折线图 -->
<script type="text/javascript">
    var dom = document.getElementById("zhexian");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: '人口动态分布图',
            subtext: '                      人口数'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        //下载保存图
        // toolbox: {
        //     show: true,
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018','年份']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
                lte: 12,
                color: 'red'
            },
            {
                gt: 12,
                lte: 13,
                color: 'green'
            },
            {
                gt: 13,
                lte: 17,
                color: 'red'
            },
            {
                gt: 17,
                color: 'red'
            }]
        },
        series: [{
            name: '人口数',
            type: 'line',
            smooth: true,
            data: [10.8, 13.4, 15.7, 19.6, 22.8, 25.0, 28.6, 30.7, 31.4, 32.7, 33.0, 34.2, 35.4, 34.9, 36, 37.2, 38.8, 39.2, 39.6, 41.5],
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 左侧饼状图 -->
<script type="text/javascript">
    var dom = document.getElementById("rkdtfb");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '人口占比图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['重点人口','外来人口','流动人口','本地人口']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:2000, name:'重点人口'},
                    {value:163610, name:'外来人口'},
                    {value:56215, name:'流动人口'},
                    {value:208730, name:'本地人口'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 右侧环形嵌套 -->
<script type="text/javascript">
    var dom = document.getElementById("hxqt");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
                text: '房屋使用情况',
                subtext: '',
                x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['已出租未使用','已出租正在使用','未出租','本地自住','本地待出租','闲置']
        },
        series: [
            {
                name:'房屋使用情况',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:92900, name:'商用'},
                    {value:204800, name:'居住'}
                ]
            },
            {
                name:'房屋使用情况',
                type:'pie',
                radius: ['40%', '55%'],
                // label: {
                //     normal: {
                //         formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                //         backgroundColor: '#eee',
                //         borderColor: '#aaa',
                //         borderWidth: 1,
                //         borderRadius: 4,
                //         rich: {
                //             a: {
                //                 color: '#999',
                //                 lineHeight: 22,
                //                 align: 'center'
                //             },
                //             hr: {
                //                 borderColor: '#aaa',
                //                 width: '100%',
                //                 borderWidth: 0.5,
                //                 height: 0
                //             },
                //             b: {
                //                 fontSize: 16,
                //                 lineHeight: 33
                //             },
                //             per: {
                //                 color: '#eee',
                //                 backgroundColor: '#334455',
                //                 padding: [2, 4],
                //                 borderRadius: 2
                //             }
                //         }
                //     }
                // },
                data:[
                    {value:335, name:'已出租未使用'},
                    {value:3100, name:'未出租'},
                    {value:251, name:'闲置'},
                    {value:89214, name:'已出租正在使用'},
                    {value:12306, name:'本地自住'},
                    {value:192243, name:'本地待出租'},
                    {value:251, name:'闲置'}

                ]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 六边形雷达图 -->
<script type="text/javascript">
    var dom = document.getElementById("leida");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: '重点人口占比变化',
            subtext: '',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item',
            backgroundColor : 'rgba(0,0,250,0.2)'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function (){
                var list = [];
                for (var i = 1; i <=18; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
           indicator : [
               { text: 'A街道', max: 400},
               { text: 'B街道', max: 400},
               { text: 'C街道', max: 400},
               { text: 'D街道', max: 400},
               { text: 'E街道', max: 400}
            ]
        },
        series : (function (){
            var series = [];
            for (var i = 1; i <= 28; i++) {
                series.push({
                    name:'浏览器（数据纯属虚构）',
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)'
                        }
                    },
                    data:[
                      {
                        value:[
                            (40 - i) * 10,
                            (38 - i) * 4 + 60,
                            i * 5 + 10,
                            i * 9,
                            i * i /2
                        ],
                        name: i + 2000 + ''
                      }
                    ]
                });
            }
            return series;
        })()
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
